<template>
	<view class="box screen-all flex">
		<head-navigation></head-navigation>
		<scroll-view class="screen-all" scroll-y>
			<!-- top -->
			<view class="top-view flex aCenter">
				<image class="top-head" src="../../static/home_bg.png"></image>
				<text class="top-title">派对兔黄河路店</text>
				<view class="top-tab-view flex row aCenter">
					<view :class="[timeType == 1 ? 'top-tab-btn-active' : 'top-tab-btn', 'flex center']" @click="onTimeType(1)">今日</view>
					<view :class="[timeType == 2 ? 'top-tab-btn-active' : 'top-tab-btn', 'flex center']" @click="onTimeType(2)">本月</view>
					<view :class="[timeType == 3 ? 'top-tab-btn-active' : 'top-tab-btn', 'flex center']" @click="onTimeType(3)">总计</view>
				</view>
				<view class="top-statistics flex-1 flex row aCenter">
					<view class="top-stat-item flex-1 flex center">
						<text class="top-stat-num">{{today_money}}</text>
						<text class="top-stat-hint">交易金额</text>
					</view>
					<view class="line"></view>
					<view class="top-stat-item flex-1 flex center">
						<text class="top-stat-num">{{refund_money}}</text>
						<text class="top-stat-hint">退款金额</text>
					</view>
					<view class="line"></view>
					<view class="top-stat-item flex-1 flex center">
						<text class="top-stat-num">{{order_num}}</text>
						<text class="top-stat-hint">订单笔数</text>
					</view>
				</view>
			</view>
			
			<!-- 走势图 -->
			<view class="content-charts-view flex">
				<!-- title -->
				<view class="charts-title-view flex row aCenter">
					<view class="charts-line"></view>
					<text class="charts-title">收益走势图</text>
				</view>
				
				<view class="top-tab-view-sy flex row">
					<view :class="[dateType == 1 ? 'top-sy-btn-active' : 'top-sy-btn', 'flex center']" @click="onDateType(1)">本周</view>
					<view :class="[dateType == 2 ? 'top-sy-btn-active' : 'top-sy-btn', 'flex center']" @click="onDateType(2)">本月</view>
					<view :class="[dateType == 3 ? 'top-sy-btn-active' : 'top-sy-btn', 'flex center']" @click="onDateType(3)">近一年</view>
				</view>
				<!-- charts -->
				<!-- <qiun-data-charts type="line" :chartData="chartsDataLine" :echartsH5="true"/> -->
				
				<view class="flex-1">
					<qiun-data-charts
					  type="line"
					  :opts="lineConfig"
					  :chartData="chartData"
					  :inScrollView="true"
					  :disableScroll="true"
					  :ontouch="true"
					  background="#0E182F"
					/>
				</view>
			</view>
		</scroll-view>
		
		<!-- tabbar -->
		<view class="tabbar-view flex row">
			<view class="tabbar-active flex-1 flex center" @click="onTabbar(1)">
				<image src="../../static/tab_home_s.png"></image>
				<text>首页</text>
			</view>
			<view class="flex-1 flex center" @click="onTabbar(2)">
				<image src="../../static/tab_order_n.png"></image>
				<text>门店订单</text>
			</view>
			<view class="flex-1 flex center" @click="onTabbar(3)">
				<image src="../../static/tab_rank_n.png"></image>
				<text>销售排行</text>
			</view>
		</view>
	</view>
</template>

<script>
	import configUcharts from './config-ucharts.js';
	export default {
		data() {
			return {
				timeType: 1, //1=今日  2=本月  3=总计
				dateType: 1, //1=本周  2=本月  3=一年
				
				lineConfig: {
					enableScroll: true,
					fontColor: '#B1A5B5',
					color: [
						"#D472F8",
						"#FF9F7F",
						"#32C5E9",
					],
					xAxis: {
						axisLineColor: '#222B46',
						gridColor: "#222B46",
						itemCount: 3,
					},
					yAxis: {
						data: [
							{
								axisLineColor: '#222B46',
								fontColor: '#B1A5B5',
							}
						],
						gridColor: '#222B46',
					},
					extra: {
						tooltip: {
							borderRadius: 5,
							bgOpacity: 1,
							bgColor: "#FFFFFF",
							showArrow: false,
							fontColor: "#121212",
							gridColor: '#222B46',
						}
					}
				},
				
				chartData:{
				  // categories:["9/28","9/29","9/30","10/01","10/02"],
				  // series:[{ "name": "收益", data: [20, 11, 25, 90, 87]}],
				},
				
				today_money: 0,
				refund_money: 0,
				order_num: 0,
				
				chartDataValue1: {},
				chartDataValue2: {},
				chartDataValue3: {},
			}
		},
		onLoad() {
			this.getInfo();
			this.getLineData();
		},
		methods: {
			onTabbar (type) {
				console.log(type);
				if(type == 1){
					// uni.reLaunch({
					// 	url: 'tabbar-home'
					// })
				}else if(type == 2){
					uni.reLaunch({
						url: 'tabbar-orders'
					})
				}else if(type == 3){
					uni.reLaunch({
						url: 'tabbar-rank'
					})
				}
			},
			onTimeType (type) {
				this.timeType = type;
				this.getInfo();
			},
			onDateType (type) {
				this.dateType = type;
				if(this.dateType == 1){
					this.chartData = this.chartDataValue1;
				}else if(this.dateType == 2){
					this.chartData = this.chartDataValue2;
				}else if(this.dateType == 3){
					this.chartData = this.chartDataValue3;
				}
				// this.getLineData();
			},
			getInfo () {
				// api/user/admin_message
				let params = {
					token: uni.getStorageSync("token"),
					type: this.timeType,
				}
				console.log(params);
				this.$request("api/user/admin_message", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(code == 1){
							this.today_money = data.today_money;
							this.refund_money = data.refund_money;
							this.order_num = data.order_num;
						}else{
							
						}
					}).catch((e) => {
						console.log(e);
					});
			},
			getLineData () {
				//api/admin/admin_line_chart
				let params = {
					token: uni.getStorageSync("token"),
				}
				console.log(params);
				this.$request("api/user/admin_line_chart", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(code == 1){
							// Object.keys(data).map((key, index)=> {});
							// ========== 数据一 ==========
							let _obj1 = data['value1'];
							if(_obj1){
								let _categories = [];
								let _seriesData = [];
								Object.keys(_obj1).map((key, index)=> {
									_categories.push(key);
									_seriesData.push(_obj1[key]);
								});
								this.chartDataValue1 = {
									categories: _categories,
									series : [{ name: '收益', data: _seriesData }],
								};
							}
							if(this.dateType == 1){
								this.chartData = this.chartDataValue1;
							}
							
							// ========== 数据二 ==========
							let _obj2 = data['value2'];
							if(_obj2){
								let _categories = [];
								let _seriesData = [];
								Object.keys(_obj2).map((key, index)=> {
									_categories.push(key);
									_seriesData.push(_obj2[key]);
								});
								this.chartDataValue2 = {
									categories: _categories,
									series : [{ name: '收益', data: _seriesData }],
								};
							}
							if(this.dateType == 2){
								this.chartData = this.chartDataValue2;
							}
							
							// ========== 数据三 ==========
							let _obj3 = data['value3'];
							if(_obj3){
								let _categories = [];
								let _seriesData = [];
								Object.keys(_obj3).map((key, index)=> {
									_categories.push(key);
									_seriesData.push(_obj3[key]);
								});
								this.chartDataValue3 = {
									categories: _categories,
									series : [{ name: '收益', data: _seriesData }],
								};
							}
							if(this.dateType == 3){
								this.chartData = this.chartDataValue3;
							}
							
							console.log('chartData=', this.chartDataValue1, this.chartDataValue2, this.chartDataValue3);
							
						}else{
							
						}
					}).catch((e) => {
						console.log(e);
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #010B24;
	}
	.top-view {
		width: 700rpx;
		height: 380rpx;
		background-color: #172037;
		margin-left: 25rpx;
		border-radius: 20rpx;	
		margin-top: 100rpx;
		padding: 20rpx;
	}
	.top-head {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin-top: -70rpx;
	}
	.top-title {
		font-size: 28rpx;
		color: #FFFFFF;
		margin-top: 10rpx;
	}
	.top-tab-view {
		margin-top: 36rpx;
		padding-bottom: 36rpx;
		border-bottom: 1rpx solid #273045;
	}
	.top-tab-view-sy {
		margin-top: 36rpx;
		padding: 0 50rpx 36rpx 50rpx;
		width: 100%;
		justify-content: space-around;
	}
	.top-tab-btn-active {
		width: 152rpx;
		height: 56rpx;
		background-color: #D472F8;
		border-radius: 28rpx;
		margin: 0 20rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.top-tab-btn {
		width: 152rpx;
		height: 56rpx;
		background-color: #172037;
		border-radius: 28rpx;
		margin: 0 20rpx;
		font-size: 28rpx;
		color: #B2B2B2;
	}
	.top-statistics {
		width: 100%;
		padding-top: 12rpx;
	}
	.top-stat-num {
		font-size: 30rpx;
		color: #FFF;
	}
	.top-stat-hint {
		font-size: 26rpx;
		color: #C1C1C1;
		margin-top: 12rpx;
	}
	.line {
		width: 1rpx;
		height: 50rpx;
		background-color: #777777;
	}
	.content-charts-view {
		width: 700rpx;
		height: 700rpx;
		background-color: #0E172F;
		margin-left: 25rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding: 20rpx;
	}
	.charts-line {
		width: 5rpx;
		height: 26rpx;
		background-color: #D472F8;
	}
	.charts-title {
		font-size: 30rpx;
		color: #FFF;
		margin-left: 16rpx;
	}
	.top-sy-btn {
		width: 123rpx;
		height: 80rpx;
		font-size: 28rpx;
		color: #B1A5B5;
		border-bottom: 1rpx solid #0E182F;
	}
	.top-sy-btn-active {
		width: 123rpx;
		height: 80rpx;
		font-size: 28rpx;
		color: #D472F8;
		border-bottom: 1rpx solid #D472F8;
	}
	
	
	
	
	.tabbar-view {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		background-color: #010B24;
		image {
			width: 36rpx;
			height: 36rpx;
			margin-bottom: 3rpx;
		}
		text {
			font-size: 26rpx;
			color: #FFF;
		}
	}
	.tabbar-active {
		text {
			font-size: 26rpx;
			color: #9D38F3;
		}
	}
</style>
